<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>a: {{ a }}</h4>
		<h4>b: {{ b }}</h4>
		<h4>c: {{ c }}</h4>
		<h4>d: {{ d }}</h4>
		<Child :a="a" :b="b" v-bind="{ c, d }" :updateA="updateA" />
	</div>
</template>
<!-- attrs, 能在祖孙之间互传 -->

<script setup lang="ts" name="Father">
import { ref } from 'vue'
import Child from './Child.vue';

let a = ref(1);
let b = ref(1);
let c = ref(1);
let d = ref(1);

function updateA(value: number) {
	a.value += value
}
</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}
</style>
